<template>
  <a-flex justify="end"
    ><a-button type="link" @click="addItem">添加字典项</a-button>
  </a-flex>
  <a-table
    :columns="columns"
    :data-source="state.lstCode"
    bordered
    size="small"
    :pagination="false"
  >
    <template #bodyCell="{ column, text, record }">
      <template v-if="['c', 'l'].includes(column.dataIndex)">
        <div>
          <a-input
            v-if="editableData[record.key]"
            v-model:value="editableData[record.key][column.dataIndex]"
            style="margin: -5px 0"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'operation'">
        <a-flex v-if="editableData[record.key]" gap="small">
          <a-typography-link @click="save(record.key)"
            ><CheckOutlined
          /></a-typography-link>
          <a-popconfirm :title="$t('301')" @confirm="cancel(record.key)">
            <a><StopOutlined /></a>
          </a-popconfirm>
        </a-flex>
        <a-flex v-else gap="small">
          <a-button type="link" @click="edit(record.key)"
            ><EditOutlined
          /></a-button>
          <a-button type="link" @click="remove(record.key)" danger
            ><DeleteOutlined
          /></a-button>
        </a-flex>
      </template>
    </template>
  </a-table>
</template>
<script setup>
import {
  EditOutlined,
  DeleteOutlined,
  CheckOutlined,
  StopOutlined,
} from "@ant-design/icons-vue";
import { reactive } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const emits = defineEmits(["change"]);
const state = reactive({
  lstCode: [],
  currentKey: 1,
});

const columns = [
  {
    title: t("302"),
    dataIndex: "c",
    sorter: (a, b) => a.c.localeCompare(b.c, undefined, { numeric: true }),
    sortDirections: ["descend", "ascend"],
  },
  {
    title: t("301"),
    dataIndex: "l",
  },
  {
    title: "",
    dataIndex: "operation",
  },
];

const setCodeSource = (codeSourceString) => {
  // console.log(codeSourceString);
  state.currentKey = 1;
  if (codeSourceString && codeSourceString.length > 0) {
    let ary = JSON.parse(codeSourceString);
    // console.log(ary);
    // console.log(typeof ary);
    ary.forEach((item) => {
      item.key = state.currentKey;
      state.currentKey++;
    });
    state.lstCode = ary;
  }
};

const editableData = reactive({});

const edit = (key) => {
  if (!editableData[key]) {
    editableData[key] = {};
  }
  Object.assign(
    editableData[key],
    state.lstCode.find((item) => key === item.key)
  );
  // console.log(editableData);
};

const save = (key) => {
  Object.assign(
    state.lstCode.find((item) => key === item.key),
    editableData[key]
  );
  delete editableData[key];
  emits("change", state.lstCode);
};

const cancel = (key) => {
  delete editableData[key];
};

const remove = (key) => {
  let idx = state.lstCode.findIndex((item) => key === item.key);
  state.lstCode.splice(idx, 1);
  emits("change", state.lstCode);
};

const addItem = () => {
  let key = state.currentKey++;
  state.lstCode.push({ key, c: "" + key, l: "" + key });
  emits("change", state.lstCode);
};

defineExpose({ setCodeSource });
</script>
